<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>栅格系统与后台布局</title>
	<link rel="stylesheet" href="../../libs/layui/layui-2.9.14/dist/css/layui.css">
	<script src="../../libs//layui//layui-2.9.14/dist/layui.js"></script>

</head>

<body style="margin:10px ;">

<!-- 
	栅格布局规则：

1. 采用 layui-row 来定义行，如：<div class="layui-row"></div>  
2. 采用类似 layui-col-md* 这样的预设类来定义一组列（column），且放在行（row）内。其中： 
	•变量md 代表的是不同屏幕下的标记（可选值见下文）
	•变量* 代表的是该列所占用的12等分数（如6/12），可选值为 1 - 12
	•如果多个列的“等分数值”总和等于12，则刚好满行排列。如果大于12，多余的列将自动另起一行。
3. 列可以同时出现最多四种不同的组合，分别是：xs（超小屏幕，如手机）、sm（小屏幕，如平板）、md（桌面中等屏幕）、lg（桌面大型屏幕），以呈现更加动态灵活的布局。 
4. 可对列追加类似 layui-col-space5、 layui-col-md-offset3 这样的预设类来定义列的间距和偏移。 
5. 最后，在列（column）元素中放入你自己的任意元素填充内容，完成布局！ 

 -->
 <div class="layui-layout layui-layout-admin">
	<div class="layui-header">
	  <div class="layui-logo layui-hide-xs layui-bg-black">layout demo</div>
	  <!-- 头部区域（可配合layui 已有的水平导航） -->
	  <ul class="layui-nav layui-layout-left">
		<!-- 移动端显示 -->
		<li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
		  <i class="layui-icon layui-icon-spread-left"></i>
		</li>
		
		<li class="layui-nav-item layui-hide-xs"><a href="">nav 1</a></li>
		<li class="layui-nav-item layui-hide-xs"><a href="">nav 2</a></li>
		<li class="layui-nav-item layui-hide-xs"><a href="">nav 3</a></li>
		<li class="layui-nav-item">
		  <a href="javascript:;">nav groups</a>
		  <dl class="layui-nav-child">
			<dd><a href="">menu 11</a></dd>
			<dd><a href="">menu 22</a></dd>
			<dd><a href="">menu 33</a></dd>
		  </dl>
		</li>
	  </ul>
	  <ul class="layui-nav layui-layout-right">
		<li class="layui-nav-item layui-hide layui-show-md-inline-block">
		  <a href="javascript:;">
			<img src="./assets/flow/1.jpg" class="layui-nav-img">
			tester
		  </a>
		  <dl class="layui-nav-child">
			<dd><a href="">Your Profile</a></dd>
			<dd><a href="">Settings</a></dd>
			<dd><a href="">Sign out</a></dd>
		  </dl>
		</li>
		<li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
		  <a href="javascript:;">
			<i class="layui-icon layui-icon-more-vertical"></i>
		  </a>
		</li>
	  </ul>
	</div>
	
	<div class="layui-side layui-bg-black">
	  <div class="layui-side-scroll">
		<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
		<ul class="layui-nav layui-nav-tree" lay-filter="test">
		  <li class="layui-nav-item layui-nav-itemed">
			<a class="" href="javascript:;">menu group 1</a>
			<dl class="layui-nav-child">
			  <dd><a href="javascript:;">menu 1</a></dd>
			  <dd><a href="javascript:;">menu 2</a></dd>
			  <dd><a href="javascript:;">menu 3</a></dd>
			  <dd><a href="">the links</a></dd>
			</dl>
		  </li>
		  <li class="layui-nav-item">
			<a href="javascript:;">menu group 2</a>
			<dl class="layui-nav-child">
			  <dd><a href="javascript:;">list 1</a></dd>
			  <dd><a href="javascript:;">list 2</a></dd>
			  <dd><a href="">超链接</a></dd>
			</dl>
		  </li>
		  <li class="layui-nav-item"><a href="javascript:;">click menu item</a></li>
		  <li class="layui-nav-item"><a href="">the links</a></li>
		</ul>
	  </div>
	</div>
	
	<div class="layui-body">
	  <!-- 内容主体区域 -->
	  <div style="padding: 15px;">内容主体区域。记得修改 layui.css 和 js 的路径</div>
	</div>
	
	<div class="layui-footer">
	  <!-- 底部固定区域 -->
	  底部固定区域
	</div>
  </div>
  <script>
  //JS 
  layui.use(['element', 'layer', 'util'], function(){
	var element = layui.element
	,layer = layui.layer
	,util = layui.util
	,$ = layui.$;
	
	//头部事件
	util.event('lay-header-event', {
	  //左侧菜单事件
	  menuLeft: function(othis){
		layer.msg('展开左侧菜单的操作', {icon: 0});
	  }
	  ,menuRight: function(){
		layer.open({
		  type: 1
		  ,content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
		  ,area: ['260px', '100%']
		  ,offset: 'rt' //右上角
		  ,anim: 5
		  ,shadeClose: true
		});
	  }
	});
	
  });
  </script>
  

</body>

</html>